<template>
  <div>
    <el-card shadow="always">
      <el-tabs v-model="activeName" @tab-click="
         query.startDate = ''
        query.endDate =''
        query.watchType=''
        query.watchName=''
             time=[];
             query.iotId=''
             selectListAll=[]
      getLiatA()">
        <el-tab-pane label="开关监控" name="1">
          <el-row :gutter="20">
            <el-col :span="7">
              <el-date-picker
                v-model="time"
                type="daterange"
                :clearable="false"
                value-format="yyyy-MM-dd"
                :picker-options="$pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-input
                v-model="query.watchName"
                placeholder="请输入监控名称"
                clearable
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="query.watchType"
                clearable
                placeholder="请选择监控类型"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.dicName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>

            <el-col :span="4">
              <el-select
                v-model="query.status"
                clearable
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in [
                    {
                      name: '持续中',
                      value: '0',
                    },
                    {
                      name: '正常',
                      value: '1',
                    },
                    {
                      name: '预警',
                      value: '2',
                    },
                  ]"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>

            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  query.page = 1;
                  getLiatA();
                "
                >搜索</el-button
              ></el-col
            >
          </el-row>
          <rz-height />
          <el-button-group>
 <el-button   :type="query.iotId==''?'primary':''"   @click="query.iotId='';selectListAll=[];getLiatA()" >设备编号</el-button>  <el-button   :type="  query.iotId.split(',').includes(item)?'primary':''"  @click="selectList(item)"  v-for="item in buttonList" :key="item">{{item}}</el-button>
</el-button-group>
          <rz-height />

          <el-table border :data="tableData" style="width: 100%">
            <el-table-column prop="generateTime" label="生成时间" >
            </el-table-column>

<el-table-column prop="iotId" label="设备编号" >
            </el-table-column>
            
            <el-table-column prop="watchName" label="监控名称" >
              <template slot-scope="scope">
                {{ scope.row.watchName || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="durationSecond" label="持续秒数">
              <template slot-scope="scope">
                {{ scope.row.durationSecond || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="watchType" label="监控类型">

                 <template slot-scope="scope">
                    <span v-if="scope.row.watchType=='1'">仓库温湿度监测</span>
                    <span v-else-if="scope.row.watchType=='3'">留样冰箱温湿度监测</span>
                    <span v-else-if="scope.row.watchType=='4'">消毒柜、消毒车监测</span>
                    <span v-else-if="scope.row.watchType=='5'">紫外消毒监测</span>
                    <span v-else-if="scope.row.watchType=='6'">仓库挡鼠板监测</span>
                    <span v-else-if="scope.row.watchType=='7'">专间门窗监测</span>
                    <span v-else-if="scope.row.watchType=='8'">仓储围栏监测器</span>
              </template>

            </el-table-column>
            <el-table-column prop="switchType" label="开关">
              <template slot-scope="scope">
                {{ scope.row.switchType == 0 ? "关" : "开" }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">持续中</span>
                <span v-else-if="scope.row.status == 1">正常</span>
                <span v-else-if="scope.row.status == 2">预警</span>
              </template>
            </el-table-column>
          </el-table>

           <pagination
        :total="total"
        @pagination="getLiatA"
        :page.sync="query.page"
      />
        </el-tab-pane>
        <el-tab-pane label="温湿度监控" name="2">
                 <el-row :gutter="20">
            <el-col :span="7">
              <el-date-picker
                v-model="time"
                type="daterange"
                :clearable="false"
                value-format="yyyy-MM-dd"
                :picker-options="$pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-input
                v-model="query.watchName"
                placeholder="请输入监控名称"
                clearable
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="query.watchType"
                clearable
                placeholder="请选择监控类型"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.dicName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>

            <el-col :span="4">
              <el-select
                v-model="query.status"
                clearable
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in [
                    {
                      name: '持续中',
                      value: '0',
                    },
                    {
                      name: '正常',
                      value: '1',
                    },
                    {
                      name: '预警',
                      value: '2',
                    },
                  ]"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>

            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  query.page = 1;
               getLiatA();
                "
                >搜索</el-button
              ></el-col
            >
          </el-row>
          <rz-height />
               <el-button-group>
  <el-button   :type="query.iotId==''?'primary':''"   @click="query.iotId='';selectListAll=[];getLiatA()" >设备编号</el-button>    <el-button  :type=" query.iotId.split(',').includes(item)?'primary':''"  @click="selectList(item)"  v-for="item in buttonList" :key="item">{{item}}</el-button>
</el-button-group>
          <rz-height />
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column prop="generateTime" label="生成时间">
            </el-table-column>
            <el-table-column prop="iotId" label="设备编号" >
            </el-table-column>
            <el-table-column prop="watchName" label="监控名称" >
                <template slot-scope="scope">
                {{ scope.row.watchName || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="numi" label="温度(%)">
            </el-table-column>

             <el-table-column prop="t1" label="温度(℃)">
              <template slot-scope="scope">
                {{ scope.row.t1 || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="watchType" label="监控类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.watchType=='1'">仓库温湿度监测</span>
                    <span v-else-if="scope.row.watchType=='3'">留样冰箱温湿度监测</span>
                    <span v-else-if="scope.row.watchType=='4'">消毒柜、消毒车监测</span>
                    <span v-else-if="scope.row.watchType=='5'">紫外消毒监测</span>
                    <span v-else-if="scope.row.watchType=='6'">仓库挡鼠板监测</span>
                    <span v-else-if="scope.row.watchType=='7'">专间门窗监测</span>
                    <span v-else-if="scope.row.watchType=='8'">仓储围栏监测器</span>
              </template>
            </el-table-column>
         
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">持续中</span>
                <span v-else-if="scope.row.status == 1">正常</span>
                <span v-else-if="scope.row.status == 2">预警</span>
              </template>
            </el-table-column>
          </el-table>

           <pagination
        :total="total"
        @pagination="getLiatA"
        :page.sync="query.page"
      />
        </el-tab-pane>
        <el-tab-pane label="红外线监控" name="3">
                 <el-row :gutter="20">
            <el-col :span="7">
              <el-date-picker
                v-model="time"
                type="daterange"
                :clearable="false"
                value-format="yyyy-MM-dd"
                :picker-options="$pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-input
                v-model="query.watchName"
                placeholder="请输入监控名称"
                clearable
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="query.watchType"
                clearable
                placeholder="请选择监控类型"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.dicName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>

            <el-col :span="4">
              <el-select
                v-model="query.status"
                clearable
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in [
                    {
                      name: '持续中',
                      value: '0',
                    },
                    {
                      name: '正常',
                      value: '1',
                    },
                    {
                      name: '预警',
                      value: '2',
                    },
                  ]"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>

            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  query.page = 1;
                   getLiatA();
                "
                >搜索</el-button
              ></el-col
            >
          </el-row>
          <rz-height />
               <el-button-group>
  <el-button   :type="query.iotId==''?'primary':''"   @click="query.iotId='';selectListAll=[];getLiatA()" >设备编号</el-button> <el-button   :type=" query.iotId.split(',').includes(item)?'primary':''"  @click="selectList(item)"  v-for="(item,index) in buttonList" :key="index">{{item}}</el-button>
</el-button-group>
          <rz-height />
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column prop="generateTime" label="生成时间">
            </el-table-column>
            <el-table-column prop="iotId" label="设备编号" >
            </el-table-column>
            <el-table-column prop="watchName" label="监控名称" >
                <template slot-scope="scope">
                {{ scope.row.watchName || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="durationSecond" label="持续秒数">
              <template slot-scope="scope">
                {{ scope.row.durationSecond || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="watchType" label="监控类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.watchType=='1'">仓库温湿度监测</span>
                    <span v-else-if="scope.row.watchType=='3'">留样冰箱温湿度监测</span>
                    <span v-else-if="scope.row.watchType=='4'">消毒柜、消毒车监测</span>
                    <span v-else-if="scope.row.watchType=='5'">紫外消毒监测</span>
                    <span v-else-if="scope.row.watchType=='6'">仓库挡鼠板监测</span>
                    <span v-else-if="scope.row.watchType=='7'">专间门窗监测</span>
                    <span v-else-if="scope.row.watchType=='8'">仓储围栏监测器</span>
              </template>
            </el-table-column>
            <el-table-column prop="switchType" label="开关">
              <template slot-scope="scope">
                {{ scope.row.switchType == 0 ? "关" : "开" }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">持续中</span>
                <span v-else-if="scope.row.status == 1">正常</span>
                <span v-else-if="scope.row.status == 2">预警</span>
              </template>
            </el-table-column>
          </el-table>

           <pagination
        :total="total"
        @pagination="getLiatA"
        :page.sync="query.page"
      />
        </el-tab-pane>
        <el-tab-pane label="门磁监控" name="4">
                 <el-row :gutter="20">
            <el-col :span="7">
              <el-date-picker
                v-model="time"
                type="daterange"
                :clearable="false"
                value-format="yyyy-MM-dd"
                :picker-options="$pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-input
                v-model="query.watchName"
                placeholder="请输入监控名称"
                clearable
              ></el-input>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="query.watchType"
                clearable
                placeholder="请选择监控类型"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.dicName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>

            <el-col :span="4">
              <el-select
                v-model="query.status"
                clearable
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in [
                    {
                      name: '持续中',
                      value: '0',
                    },
                    {
                      name: '正常',
                      value: '1',
                    },
                    {
                      name: '预警',
                      value: '2',
                    },
                  ]"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>

            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  query.page = 1;
                  getLiatA();
                "
                >搜索</el-button
              ></el-col
            >
          </el-row>
          <rz-height />
               <el-button-group>
  <el-button   :type="query.iotId==''?'primary':''"   @click="query.iotId='';selectListAll=[];getLiatA()" >设备编号</el-button> <el-button  :type=" query.iotId.split(',').includes(item)?'primary':''"  @click="selectList(item)"  v-for="(item,index) in buttonList" :key="index">{{item}}</el-button>
</el-button-group>
          <rz-height />
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column prop="generateTime" label="生成时间" >
            </el-table-column>
            <el-table-column prop="iotId" label="设备编号" >
            </el-table-column>
            <el-table-column prop="watchName" label="监控名称" >
                <template slot-scope="scope">
                {{ scope.row.watchName || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="durationSecond" label="持续秒数">
              <template slot-scope="scope">
                {{ scope.row.durationSecond || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="watchType" label="监控类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.watchType=='1'">仓库温湿度监测</span>
                    <span v-else-if="scope.row.watchType=='3'">留样冰箱温湿度监测</span>
                    <span v-else-if="scope.row.watchType=='4'">消毒柜、消毒车监测</span>
                    <span v-else-if="scope.row.watchType=='5'">紫外消毒监测</span>
                    <span v-else-if="scope.row.watchType=='6'">仓库挡鼠板监测</span>
                    <span v-else-if="scope.row.watchType=='7'">专间门窗监测</span>
                    <span v-else-if="scope.row.watchType=='8'">仓储围栏监测器</span>
              </template>
            </el-table-column>
            <el-table-column prop="switchType" label="开关">
              <template slot-scope="scope">
                {{ scope.row.switchType == 0 ? "关" : "开" }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">持续中</span>
                <span v-else-if="scope.row.status == 1">正常</span>
                <span v-else-if="scope.row.status == 2">预警</span>
              </template>
            </el-table-column>
          </el-table>

           <pagination
        :total="total"
        @pagination="getLiatA"
        :page.sync="query.page"
      />
        </el-tab-pane>
      </el-tabs>
     
    </el-card>
  </div>
</template>
<script>
import axios from "axios";
export default {
  // props:[],
  // 页面加载
  created() {
    this.query.licenceNo = sessionStorage.getItem("newLicenseNo");
    this.getLiatA()
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      activeName: "1",
      query: {
        licenceNo: "",
        watchName: "",
        watchType: "",
        status: "",
        page: 1,
        size: 10,
        startDate: "",
        endDate: "",
        iotId:""
      },
      selectListAll:[],
      options: [],
      tableData: [],
      total: 0,
      time:[],
      buttonList:[]
    };
  },
  // 方法
  methods: {
    selectListAllS(){
          if(this.selectListAll.length==0){
            this.selectListAll=this.buttonList.map(x=>x)
               this.query.iotId=this.selectListAll.join(",")
          }else{
             this.selectListAll=[]
              this.query.iotId=""
          }
    },
    selectList(e){
          if(this.selectListAll.includes(e)){
                this.selectListAll.splice(this.selectListAll.findIndex(x=>x==e),1)
          }else {
            this.selectListAll.push(e)
          }
          this.query.iotId=this.selectListAll.join(",")
          this.getLiatA()
    },
    getLiatA() {
        this.total=0
        this.tableData=[]
        this.options=[]
        if(this.time.length){
           this.query.startDate = this.time[0];
          this.query.endDate = this.time[1];
        }
        
      if (this.activeName == 1) {
        this.getList();
      } else if (this.activeName == 2) {
        this.getList1();
      } else if (this.activeName == 3) {
        this.getList2();
      } else if (this.activeName == 4) {
        this.getList3();
      }
    },
    getList() {
      axios
        .get("https://wlsa.etmobile.net/wlsa-api/ps", { params: this.query })
        .then((res) => {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        });
      axios
        .get("https://wlsa.etmobile.net/wlsa-api/sys-dic", {
          params: {
            category: "device_ps",
            isEnable: 1,
          },
        })
        .then((res) => {
          this.options = res.data.data.list;
        });

 axios
        .get("https://wlsa.etmobile.net/wlsa-api/list-iot-id", {
          params: {
            licenceNo: this.query.licenceNo,  
          model:"ps"
          },
        })
        .then((res) => {
          this.buttonList = res.data.data;
        });



    },
    getList1() {
      axios
        .get("https://wlsa.etmobile.net/wlsa-api/th", { params: this.query })
        .then((res) => {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        });
      axios
        .get("https://wlsa.etmobile.net/wlsa-api/sys-dic", {
          params: {
            category: "device_th",
            isEnable: 1,
          },
        })
        .then((res) => {
          this.options = res.data.data.list;
        });
         axios
        .get("https://wlsa.etmobile.net/wlsa-api/list-iot-id", {
          params: {
            licenceNo: this.query.licenceNo,  
          model:"th"
          },
        })
        .then((res) => {
          this.buttonList = res.data.data;
        });
    },
    getList2() {
      axios
        .get("https://wlsa.etmobile.net/wlsa-api/rs", { params: this.query })
        .then((res) => {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        });
      axios
        .get("https://wlsa.etmobile.net/wlsa-api/sys-dic", {
          params: {
            category: "device_rs",
            isEnable: 1,
          },
        })
        .then((res) => {
          this.options = res.data.data.list;
        });
         axios
        .get("https://wlsa.etmobile.net/wlsa-api/list-iot-id", {
          params: {
            licenceNo: this.query.licenceNo,  
          model:"rs"
          },
        })
        .then((res) => {
          this.buttonList = res.data.data;
        });
    },
    getList3() {
      axios
        .get("https://wlsa.etmobile.net/wlsa-api/mg", { params: this.query })
        .then((res) => {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        });
      axios
        .get("https://wlsa.etmobile.net/wlsa-api/sys-dic", {
          params: {
            category: "device_mg",
            isEnable: 1,
          },
        })
        .then((res) => {
          this.options = res.data.data.list;
        });

         axios
        .get("https://wlsa.etmobile.net/wlsa-api/list-iot-id", {
          params: {
            licenceNo: this.query.licenceNo,  
          model:"mg"
          },
        })
        .then((res) => {
          this.buttonList = res.data.data;
        });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {
  },
};
</script>

<style lang="scss" scoped>
</style>